<!-- 报修数量环比分析 -->
<template>
	<a-card class="container">
		<template #title> 报修数量环比分析 </template>
		<template #extra>
			<a-button type="primary" class="mybtn" :icon="h(SearchOutlined)" @click="initData">查询</a-button>
			<a-button class="mybtn" :icon="h(RedoOutlined)" @click="restPage">重置</a-button>
		</template>
		<a-form class="search-form">
			<a-row>
				<a-col :span="8">
					<a-form-item label="维修月份: " name="tongji_month">
						<a-date-picker v-model:value="tongji_month" @change="initData" picker="month" :size="size" />
					</a-form-item>
				</a-col>
				<a-col :span="16">
					<a-form-item label="报修类型 " @change="initData" name="type">
						<a-radio-group :size="size" v-model:value="tongji_type" button-style="solid" @change="initData">
							<a-radio-button value="报修单位">报修单位</a-radio-button>
							<a-radio-button value="报修区域">报修区域</a-radio-button>
							<a-radio-button value="报修项目">报修项目</a-radio-button>
						</a-radio-group>
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>
		<a-collapse v-model:activeKey="activeKey">
			<a-collapse-panel key="1" header="统计图表">
				<HbBxlEchart :xdata="xData" :ydata="yData" :ydata2="yData2" title="报修数量环比分析" />
			</a-collapse-panel>
			<a-collapse-panel key="2" header="统计表格">
				<a-table
					:dataSource="dataSource"
					:columns="columns"
					:size="size"
					bordered
					:pagination="false"
					:row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
				>
					<template #bodyCell="{ column, record }">
						<template v-if="column.dataIndex === 'huanbi'">
							<span v-if="record.size2_ && record.size2_ != 0 && record.size_ "
								>{{ (((record.size_ - record.size2_) / record.size2_) * 100).toFixed(2) }}%</span
							>
						</template>
					</template>
				</a-table>
			</a-collapse-panel>
		</a-collapse>
	</a-card>
</template>
<script setup>
	import { onMounted, ref, reactive, h } from 'vue';
	import { SearchOutlined, RedoOutlined, DownloadOutlined } from '@ant-design/icons-vue';
	import HbBxlEchart from '../components/hbbxl-echart.vue';
	import { RepairApi } from '@/api/repair-api';
	import tool from '@/utils/tool';
	import dayjs from 'dayjs';

	const size = ref('small');
	const activeKey = ref(['1', '2']);
	const dataSource = ref([]); //列表数据
	const tongji_month = ref();
	const tongji_type = ref('报修单位');
	tongji_month.value = dayjs(tool.getMonth(), 'YYYY-MM');
	const xData = ref([]);
	const yData = ref([]);
	const yData2 = ref([]);
	const columns = ref([]);
	onMounted(() => {
		initData();
	});

	// ----------------------查询表单部分内容---------------------
	const restPage = function () {
		tongji_type.value = '报修单位';
		tongji_month.value = dayjs(tool.getMonth(), 'YYYY-MM');
		initData();
	};
	// ----------------------列表相关部分---------------------
	const initData = async function () {
		if (!tongji_month.value) {
			tool.warning('维修月份不能为空！');
			return;
		}
		columns.value = getColumns(tongji_type.value);
		tool.showLoading();
		const data = await RepairApi.getBxHB({
			tongji_type: tongji_type.value,
			tongji_month: tongji_month.value.format('YYYY-MM'),
		});
		tool.hideLoading();

		let tableData = [];
		let nameKey = '';
		if (tongji_type.value == '报修单位') {
			nameKey = 'rep_u_name';
		} else if (tongji_type.value == '报修区域') {
			nameKey = 'rep_a_name';
		} else if (tongji_type.value == '报修项目') {
			nameKey = 'rep_i_name';
		}
		data.本月.forEach((e) => {
			tableData.push({
				size_: e.size_,
				name: e[nameKey],
			});
		});
		data.上月.forEach((e) => {
			let isHave = false;
			for (let i = 0; i < tableData.length; i++) {
				if (tableData[i].name == e[nameKey]) {
					tableData[i].size2_ = e.size_;
					isHave = true;
					break;
				}
			}
			if (!isHave) {
				tableData.push({
					size2_: e.size_,
					name: e[nameKey],
				});
			}
		});
		dataSource.value = tableData;
		let xDatas = [];
		let yDatas1 = [];
		let yDatas2 = [];
		tableData.forEach((e) => {
			xDatas.push(e.name);
			yDatas1.push(e.size_ || 0);
			yDatas2.push(e.size2_ || 0);
		});
		xData.value = xDatas;
		yData.value = yDatas1;
		yData2.value = yDatas2;
	};

	const getColumns = function (title) {
		const columns = [
			{
				title: '序号',
				dataIndex: 'index',
				key: 'index',
				name: 'index',
				fixed: 'left',
				width: '70px',
				align: 'center',
				customRender: (record) => `${record.index + 1}`,
			},
			{
				title: title,
				dataIndex: 'name',
			},
			{
				title: '本月',
				dataIndex: 'size_',
			},
			{
				title: '上月',
				dataIndex: 'size2_',
			},
			{
				title: '环比',
				dataIndex: 'huanbi',
			},
		];
		return columns;
	};

	// const initEchart = function () {
	// 	xData.value = ['校网络管理部', '客来安洗衣机', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'];
	// 	yData.value = [100, 138, 350, 173, 180, 150, 180, 230, 180, 150, 180, 230];
	// 	yData2.value = [350, 173, 180, 150, 180, 230, 180, 150, 180, 230, 30, 138];
	// };
</script>
<style lang="less" scoped>
	.container {
		width: 95%;
		margin: 8px auto;
		.search-ref {
			margin-left: 24px;
			width: 300px;
		}
		.mybtn {
			margin: 0 4px;
		}
		.search-form {
			border-bottom: 1px dotted #ccc;
			margin-bottom: 16px;
		}
	}
</style>
